import styles from './auth.module.scss';
import {useAccessStore} from "@/app/store/access";
import ChatGPTIcon from "../../icons/chatgpt.svg";
import {Button, Input} from "antd";

export function Auth() {
    const accessStore = useAccessStore();
    return (
        <div className={styles["auth-page"]}>
            <ChatGPTIcon/>
            <div className={styles["auth-title"]}>GeniusStudy</div>
            <div className={styles["auth-sub-title"]}>学习AI开发、掌握AI部署、运用AI提效</div>
            <img
                src="/weixin.jpg"
                style={{width: 300}}
                alt="阿彬阿姿微问答"
            />
            <div className={styles["auth-tips"]}>
                扫码关注公众号【阿彬阿姿微问答】
                <a
                    href="/weixin.jpg"
                    target="_blank"
                >
                    回复【403】获取访问密码
                </a>
            </div>

            <Input
                className={styles["auth-input"]}
                type="password"
                placeholder="在此处填写访问码"
                value={accessStore.accessCode}
                onChange={(e) => {
                    accessStore.updateCode(e.target.value)
                }}
                status={accessStore.accessCodeErrorMsg ? 'error' : ''}
            />
            {accessStore.accessCodeErrorMsg ?
                <span className={styles["auth-error"]}>{accessStore.accessCodeErrorMsg}</span> : null}

            <div className={styles["auth-actions"]}>
                <Button type="primary" onClick={() => {
                    accessStore.doLogin()
                }}>确认登录👣</Button>
                <Button type="text">稍后再说</Button>
            </div>
            <span style={{marginTop: '1vh'}}>说明：此平台主要以学习OpenAI为主，请合理、合法、合规的使用相关资料！</span>
        </div>
    )
}
